<template>
  <div>
    <!-- <button @click="goregister">注册</button> -->
    <div class="container" :style="'background-image:' + 'url(' + Bigbg + ')'">
      <!-- 注册框 -->
      <div class="reg_modal">
        <div class="reg_title">注册帐号</div>
        <div class="reg_country">
          <div class="country">国家/地区</div>
          <input type="text" value="中国" /><span>▼</span>
        </div>
        <div class="reg_tips">成功注册账号后,国家/地区将不可修改</div>
        <div class="reg_uname">
          <input type="text" placeholder="昵称" v-model="uname" />
        </div>
        <div class="reg_phone">
          <input
            type="text"
            placeholder="请输入手机号码"
            v-model="phone"
            @input="codenum"
          />
        </div>
        <div class="reg_code">
          <input type="text" placeholder="请输入验证码" v-model="code" /><button
            class="btn"
            @click="getcode($event)"
            :class="{ ' code_green': active }"
            v-show="show"
          >
            获取验证码
          </button>
          <button class="btn2" v-show="!show">
            {{ `${count}s` }}
          </button>
        </div>
        <div class="reg_pwd">
          <input type="password" placeholder="请输入密码" v-model="password" />
        </div>
        <div class="reg_tips">
          密码是由 6-16位数字、 字母或符号组成、至少包含 两种符号
        </div>
        <div class="reg_checkbox">
          <input type="checkbox" /><span>已阅读并同意</span
          ><a href="javascript:;">《账号使用协议》</a
          ><a href="javascript:;">《隐私政策》</a>
        </div>
        <div class="tips_none" :class="{ tips_block: active2 }">
          手机号已注册或用户名重复
        </div>
        <div class="reg_btn">
          <button @click="goregister">注册</button>
        </div>
      </div>
      <div class="footer">
        <p>
          <span>&copy; 2005 - 2021广东欢太版权所有粤ICP备14056724号-2 </span>
          <span> 联系方式:4001-999-666</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { getRegister, getsms, getGoods } from "../assets/request.js";

export default {
  data() {
    return {
      uname: "",
      phone: "",
      password: "",
      code: "",
      getcodes: "",
      Bigbg: "",
      goods: [],
      active: false,
      count: "",
      show: true,
      timer: "",
      active2: false,
    };
  },
  async created() {
    await getGoods({
      project_id: 78,
      limit: 200,
    }).then((res) => {
      this.goods = res.rows.sort((a, b) => a.id - b.id);
      this.Bigbg = this.goods.slice(76, 77)[0].s_goods_photos[0].path;
    });
  },
  methods: {
    async goregister() {
      await getRegister({
        name: this.uname,
        phone: this.phone,
        password: this.password,
      }).then(
        (res) => {
          console.log(res);
          this.active2 = false;
          this.$router.push("./login");
        },
        (err) => {
          this.active2 = true;
        }
      );
    },
    async getcode(e) {
      await getsms({
        mobile: this.phone,
      }).then((res) => {
        console.log(res.code); //1234
        this.getcodes = res.code;
      });
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    codenum() {
      if (/^1[3456789]\d{9}$/.test(this.phone)) {
        this.active = true;
      } else {
        this.active = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  box-sizing: border-box;
  padding-top: 130px;
  position: relative;
  .reg_modal {
    width: 400px;
    height: 468px;
    // background: #fff;
    margin: 0 auto;
    .reg_title {
      font-size: 25px;
      font-weight: 500;
      line-height: 36px;
      margin-bottom: 52px;
      text-align: center;
    }
    .reg_country {
      width: 400px;
      height: 45px;
      display: flex;
      background: #f7f7f7;
      border-radius: 9px;

      .country {
        color: #000;
        font-size: 12px;
        line-height: 45px;
        border-radius: 9px 0px 0px 9px;
        text-align: center;
        position: relative;
        width: 90px;
        &::after {
          background: #d8d8d8;
          content: "";
          height: 12px;
          position: absolute;
          right: 9px;
          top: 16px;
          width: 1px;
        }
      }
      input {
        width: 310px;
        background: #f7f7f7;
        line-height: 45px;
        border: none;
        box-sizing: border-box;
      }
      span {
        color: #d8d8d8;
        line-height: 45px;
        padding-right: 10px;
        cursor: pointer;
      }
    }
    .reg_tips {
      color: #000;
      font-size: 12px;
      margin: 10px auto 18px;
      opacity: 0.3;
    }
    .reg_uname {
      margin: 10px 0;
      input {
        width: 400px;
        height: 45px;
        background: #f7f7f7;
        border-radius: 9px;
        border: none;
        box-sizing: border-box;
        padding-left: 10px;
        color: #000;
        &::placeholder {
          color: #b2b2b2;
        }
      }
    }
    .reg_phone {
      width: 400px;
      height: 45px;
      background: #f7f7f7;
      border-radius: 9px;
      input {
        width: 400px;
        height: 45px;
        background: #f7f7f7;
        border-radius: 9px;
        border: none;
        box-sizing: border-box;
        padding-left: 10px;
        color: #000;
        &::placeholder {
          color: #b2b2b2;
        }
      }
    }
    .reg_code {
      margin-top: 10px;
      input {
        width: 305px;
        height: 45px;
        margin-right: 5px;
        border-radius: 9px;
        border: none;
        background: #f7f7f7;
        color: #000;
        box-sizing: border-box;
        padding-left: 10px;
        &::placeholder {
          color: #b2b2b2;
        }
      }
      .btn {
        width: 90px;
        height: 45px;
        border-radius: 9px;
        border: none;
        background-color: #000;
        border-color: #000;
        opacity: 0.15;
        color: #fff;
        font-size: 12px;
        cursor: not-allowed;
      }
      .btn2 {
        width: 90px;
        height: 45px;
        border-radius: 9px;
        border: none;
        background-color: #000;
        border-color: #000;
        opacity: 0.15;
        color: #fff;
        font-size: 12px;
        cursor: not-allowed;
      }
      .code_green {
        background-color: #2ad181;
        opacity: 1;
        cursor: pointer;
      }
    }
    .reg_pwd {
      margin-top: 10px;
      input {
        width: 400px;
        height: 45px;
        background: #f7f7f7;
        border-radius: 9px;
        border: none;
        box-sizing: border-box;
        padding-left: 10px;
        color: #000;
        &::placeholder {
          color: #b2b2b2;
        }
      }
    }
    .reg_checkbox {
      input {
        width: 18px;
        height: 18px;
        vertical-align: middle;
        margin-left: 5px;
        margin-right: 5px;
        margin-bottom: 3px;
      }
      span {
        font-size: 14px;
      }
      a {
        color: #2ad181;
        cursor: pointer;
      }
    }
    .tips_none {
      display: none;
    }
    .tips_block {
      color: red;
      font-size: 12px;
      margin-top: 10px;
      display: block;
      text-align: center;
    }

    .reg_btn {
      width: 100px;
      height: 39px;
      margin: 0 auto;

      button {
        height: 39px;
        line-height: 39px;
        margin-top: 37px;
        width: 100px;
        background-color: #2ad181;
        border: none;
        cursor: pointer;
        border-radius: 9px;
        color: #fff;
      }
    }
  }
  .footer {
    width: 100%;
    p {
      color: #9b9b9b;
      font-size: 12px;
      text-align: center;
      position: absolute;
      bottom: 20px;
      left: 39%;
    }
  }
}
</style>